<script setup lang="tsx">
import { onUnmounted, reactive, ref, watch, watchEffect } from 'vue'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import timeAxis from './components/timeAxis1.vue'
import {
  ElMessage,
  ElMessageBox,
  ElDivider,
  ElInput,
  ElTooltip,
  ElDatePicker,
  ElSelect,
  ElOption,
  ElTree,
  ElIcon,
  ElForm,
  ElFormItem,
  ElTreeSelect,
  ElButton
} from 'element-plus'
import { CameraFilled } from '@element-plus/icons-vue'
// import videotest from './components/videotest.vue'
// import { VideoPlayer } from '@/components/VideoPlayer'
import {
  getTreeDepartmentsApi,
  searchPreviewVideosApi,
  SearchPreviewVideoApi
} from '@/api/department'
import { getDevicesApi } from '@/api/role'
const videoSpeed = ref(1)
const videoSpeedOptions = [
  { label: '1倍速', value: 1 },
  { label: '1.5倍速', value: 1.5 },
  { label: '2倍速', value: 2 },
  { label: '2.5倍速', value: 2.5 },
  { label: '4倍速', value: 4 },
  { label: '4.5倍速', value: 4.5 },
  { label: '8倍速', value: 8 }
]
const chooesDay = ref(new Date()) //'2024-11-27'
const videoMode = ref(4)
const videoModeOptions = [
  { label: '单分屏', value: 1 },
  { label: '二分屏', value: 2 },
  { label: '三分屏', value: 3 },
  { label: '四分屏', value: 4 },
  { label: '五分屏', value: 5 },
  { label: '六分屏', value: 6 }
]

const currentTime = ref(
  chooesDay.value.getHours() * 3600 +
    chooesDay.value.getMinutes() * 60 +
    chooesDay.value.getSeconds()
)
let maxVideoTime = 0
// 创建一个数组来存储所有video元素的引用
const videoRefs = ref<HTMLVideoElement[]>([])
const isPlaying = ref(false)
// 用于设置视频引用的函数
const setVideoRef = (el) => {
  if (el) {
    videoRefs.value.push(el)
  }
}
const startPlay = () => {
  isPlaying.value = !isPlaying.value
  videoRefs.value.forEach((video, index) => {
    if (video) {
      if (isPlaying.value) {
        //&& video.paused
        video.play()
      } else {
        video.pause()
      }
      //   item.currentTime = currentTime.value
      //   item.play()
    }
  })
}
let pageNo = 1
const formatTime = (time, timestr) => {
  const d = new Date(chooesDay.value)
  // console.log('d', time, date)
  // const d = new Date(date.getTime() + parseInt(time))
  // console.log('d-----setTime----', d.getHours(), d.getDate())
  const year = d.getFullYear()
  const month = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  // const hours = d.getHours().toString().padStart(2, '0')
  // const minutes = d.getMinutes().toString().padStart(2, '0')
  // var seconds = d.getSeconds().toString().padStart(2, '0')
  // const date = new Date()
  // date.setSeconds(seconds)
  console.log('time', `${year}-${month}-${day} ${timestr}`)
  return new Date(`${year}-${month}-${day} ${timestr}`) //+ date.toISOString().substr(11, 5)
}
const getCurrentTime = (time: number, timestr: string) => {
  console.log('getCurrentTime--------', time, timestr)
  currentTime.value = time
  isAssign = false
  findNearTime()
  // if (maxVideoTime > time) {
  //   videoRefs.value.forEach((video, index) => {
  //     if (video) {
  //       video.currentTime = time
  //       video.play()
  //     }
  //   })
  // }
  //
}
interface VideoDt {
  endTime: number
  filePath: string
  startTime: number
  name: string
}
interface VideoItem {
  id: number
  filePath: string | null
  deviceNum: string
  startTime: number
  endTime: number
  videos: VideoDt[] | null
  currentIndex: number
  backgroundImage?: string
}

const videos = ref<VideoItem[]>([
  {
    id: 1,
    filePath: null,
    deviceNum: '',
    startTime: 0,
    endTime: 0,
    videos: [],
    currentIndex: 0
  },
  {
    id: 2,
    filePath: null,
    deviceNum: '',
    startTime: 0,
    endTime: 0,
    videos: [],
    currentIndex: 0
  },
  {
    id: 3,
    filePath: null,
    deviceNum: '',
    startTime: 0,
    endTime: 0,
    videos: [],
    currentIndex: 0
  },
  {
    id: 4,
    filePath: null,
    deviceNum: '',
    startTime: 0,
    endTime: 0,
    videos: [],
    currentIndex: 0
  },
  {
    id: 5,
    filePath: null,
    deviceNum: '',
    startTime: 0,
    endTime: 0,
    videos: [],
    currentIndex: 0
  },
  {
    id: 6,
    filePath: null,
    deviceNum: '',
    startTime: 0,
    endTime: 0,
    videos: [],
    currentIndex: 0
  }
])
//拖动目标对象el
const targetEl = ref(null)
const startIndex = ref('')
const endIndex = ref('')
// const onDragstart = (e, index) => {
//   e.dataTransfer.setData('text/plain', index.toString())
//   e.dataTransfer.effectAllowed = 'move'
// }
// const onDragstartD = (e, index) => {
//   e.dataTransfer.setData('text/plain', index.toString())
//   e.dataTransfer.effectAllowed = 'move'
// }
// const onDragend = (e) => {
//   //   console.log('onDragend', e)
// }
// const onDragover = (e) => {
//   //   console.log('onDragover', e)
//   e.preventDefault()
// }
// const onDrop = (event, droppedIndex) => {
//   const dragIndex = parseInt(event.dataTransfer.getData('text/plain'), 10)
//   // swapVideos(dragIndex, droppedIndex)
// }
const swapVideos = (dragIndex, dropIndex) => {
  const temp = videos.value[dragIndex]
  videos.value.splice(dragIndex, 1, videos.value[dropIndex])
  videos.value.splice(dropIndex, 1, temp)
}

const canvasRef = ref<HTMLCanvasElement | null>(null)
const captureVideo = (item) => {
  // let index = videos.value.findIndex((video, index) => {
  //   if (video.id === item.id) {
  //     return index
  //   }
  // })
  const video = document.getElementById(item.id) as HTMLVideoElement
  // const video = videoRefs.value[index == -1 ? 0 : index]
  // console.log('captureVideo', item, index, video, v)
  // if (video) {
  //   console.log('video', video.currentTime, video.id)
  //   getImageByVideoApi({ id: video.id, position: video.currentTime }).then((res) => {
  //     console.log('res', res)
  //   })
  // }

  // 确保视频已加载
  if (video) {
    // console.log('video', video.currentTime, video.id)
    // 将视频的当前帧绘制到canvas上
    const canvas = document.createElement('canvas') as HTMLCanvasElement
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
    // const canvas = canvasRef.value
    const ctx = canvas.getContext('2d')
    if (ctx) {
      ctx.drawImage(video, 0, 0, canvas!.width, canvas!.height)
      try {
        // 将canvas内容转换为图片URL
        const imageDataURL = canvas.toDataURL('image/png')
        const filename = `视频截图${video.id}.png` // 你希望的文件名
        downloadImage(imageDataURL, filename)
        // console.log(imageDataURL)
      } catch (e) {
        console.error('Error converting canvas to data URL:', e)
      }
    }
  }
}
const downloadImage = (imageDataURL, filename) => {
  // 创建一个a元素
  const link = document.createElement('a')
  // 设置a元素的href属性为图片的DataURL
  link.href = imageDataURL
  // 设置下载文件名
  link.download = filename
  // 隐藏a元素
  link.style.display = 'none'
  // 将a元素添加到文档中
  document.body.appendChild(link)
  // 模拟点击a元素
  link.click()
  // 从文档中移除a元素
  document.body.removeChild(link)
}
const department = ref('')
const departmentOptions = ref([])
const getDepartmentOptions = () => {
  getTreeDepartmentsApi({}).then((res) => {
    departmentOptions.value = res.data
    console.log('departmentOptions', departmentOptions.value)
  })
}
getDepartmentOptions()
const selectprops = {
  label: 'depName',
  value: 'depName',
  children: 'children'
}
const loading = ref(false)

// const getVideoList = (fileTime = chooesDay.value) => {
//   loading.value = true
//   searchPreviewVideosApi({
//     pageNo,
//     pageRow: 6,
//     pageModel: {
//       depName: department.value,
//       fileTime
//     }
//   }).then((res) => {
//     const list = res.data.pageModels
//     if (list) {
//       let maxVideo = list.reduce(
//         (maxObj, currentObj) => {
//           return currentObj.fileLength > maxObj.fileLength ? currentObj : maxObj
//         },
//         { fileLength: 0 }
//       )
//       maxVideoTime += parseInt(maxVideo.fileLength)
//       console.log('maxVideoTime', maxVideo.fileLength)
//       videos.value = list

//     } else {
//       // videos.value = [
//       //   { id: 1, filePath: null, deviceNum: null },
//       //   { id: 2, filePath: null, deviceNum: null },
//       //   { id: 3, filePath: null, deviceNum: null },
//       //   { id: 4, filePath: null, deviceNum: null },
//       //   { id: 5, filePath: null, deviceNum: null },
//       //   { id: 6, filePath: null, deviceNum: null }
//       // ]
//     }

//     loading.value = false
//   })
// }
// getVideoList()
const handleDateChange = (value) => {
  console.log('日期已选择:', value)
  // getVideoList()
  currentTime.value =
    new Date(value).getHours() * 3600 +
    new Date(value).getMinutes() * 60 +
    new Date(value).getSeconds()
  let devicesNums: string[] = []
  videos.value.forEach((item) => {
    if (item.deviceNum) {
      devicesNums.push(item.deviceNum)
    }
  })
  if (devicesNums.length) {
    searchPreviewVideosApi({
      deviceNums: devicesNums,
      fileTime: value
    }).then((res) => {
      console.log('res', res)
      const list = res.data || []
      list.forEach((item) => {
        let v = videos.value.find((video) => video.deviceNum === item.deviceNum)
        if (v) {
          setVideoRangeBackground(v)
          v.videos = item.videos
          if (item.videos[0]) {
            v.filePath = item.videos[0].filePath || null
            v.startTime = item.videos[0].startTime || 0
            v.endTime = item.videos[0].endTime || 0
          } else {
            v.filePath = null
          }
          v.currentIndex = 0
        }
      })
    })
  }
}
interface Device {
  deviceName: string
  deviceNo: string
  id: number
  ip: string
  port: number
  status: number
  type: number
  userId: number
  userName: string
  depName: string
}

let devicesList = ref<Device[]>([])
const departmentChange = (value) => {
  // getVideoList()
  getDevicesApi({ depName: value, pageFlag: false }).then((res) => {
    devicesList.value = res.data?.pageModels || []
  })
}
const syncData = () => {
  if (currentTime.value) {
    console.log('currentTime', currentTime.value)
    const date = new Date(null)
    date.setSeconds(currentTime.value)
    console.log('时间-----', date.toISOString().substr(11, 8))
    findNearTime()
  }
}
watchEffect(() => {
  if (videoSpeed.value) {
    videoRefs.value.forEach((item, index) => {
      item.playbackRate = videoSpeed.value
    })
  }
  if (currentTime.value) {
    console.log('currentTime', currentTime.value)
    const date = new Date(null)
    date.setSeconds(currentTime.value)
    console.log('时间-----', date.toISOString().substr(11, 8))
    // findNearTime()
  }
})
let currentNo = ''
let currentName = ''
let moveNos = new Set<String>()
const onDragEnter = (event: any, id: number) => {
  console.log('onDragEnter----', id, event.target.getAttribute('data-id'))

  if (event.target.getAttribute('data-id')) {
    endIndex.value = id + '' //event.target.getAttribute('data-id')
    event.target.classList.add('video-hover')
  }
  // endIndex.value = event.target.getAttribute('data-id')
  // event.target.classList.add('video-hover')
}
const onDragLeave = (event: any) => {
  console.log('onDragLeave', event.target)
  if (endIndex.value) {
    event.target.classList.remove('video-hover')
    // endIndex.value = ''
  }
}
const DeviceDragstart = (event: any, no: string, name: string) => {
  console.log('DeviceDragstart', event.target)
  startIndex.value = event.target.getAttribute('data-id')
  currentNo = no
  currentName = name
}
const setVideoRangeBackground = (video: VideoItem) => {
  const gradientStops = ['white 0%']
  if (video.videos) {
    video.videos.forEach((interval) => {
      const startPercent = (interval.startTime / 86400) * 100
      const endPercent = (interval.endTime / 86400) * 100
      gradientStops.push(`white ${startPercent}%`)
      gradientStops.push(`red ${startPercent}%`)
      gradientStops.push(`red ${endPercent}%`)
      gradientStops.push(`white ${endPercent}%`)
    })
  }

  gradientStops.push('white 100%')
  video.backgroundImage = `linear-gradient(to right, ${gradientStops.join(', ')})`
  console.log('gradientStops', gradientStops)
}
const byNogetVideo = (no: string) => {
  moveNos.add(no)
  SearchPreviewVideoApi({
    deviceNum: no,
    fileTime: chooesDay.value
  }).then((res) => {
    if (res.code === 0) {
      let vObj = res.data || []
      // vObj[0]?.videos?.forEach((item) => {
      //   item.startTime = getLongTime(item.startTime)
      //   item.endTime = getLongTime(item.endTime)
      // })
      // devicesVideoList.value[endIndex.value] = vObj
      if (vObj[0]?.videos) {
        videos.value[endIndex.value].filePath = vObj[0]?.videos[0].filePath
        videos.value[endIndex.value].startTime = vObj[0]?.videos[0].startTime
        videos.value[endIndex.value].endTime = vObj[0]?.videos[0].endTime
        videos.value[endIndex.value].videos = vObj[0]?.videos
        setVideoRangeBackground(videos.value[endIndex.value])
      }
    }
  })
}
let timerId = null
let isAssign = true
const getLongTime = (time: string) => {
  let times = time.split(':')
  return parseInt(times[0]) * 3600 + parseInt(times[1]) * 60 + parseInt(times[2])
}

const findNearTime = () => {
  console.log('findNearTime', videos.value)
  videos.value.forEach((item, index) => {
    if (item.videos) {
      let index = item.videos.findIndex((v) => {
        const video = v as VideoDt
        return video.startTime <= currentTime.value && video.endTime >= currentTime.value
      })
      console.log('index-----------', currentTime.value, index)
      if (index >= 0) {
        const v = item.videos[index] as VideoDt
        item.filePath = v.filePath
        item.startTime = v.startTime
        item.endTime = v.endTime
        item.currentIndex = index
      } else {
        item.filePath = null
      }
    }
  })
}

// 处理第一个视频加载完成的事件
const handleLoadedData = (event) => {
  // 检查是否是第一个视频
  if (videoRefs.value[0] === event.target) {
    console.log('第一个视频加载完成，开始播放', event.target.getAttribute('data-start'))
    // 开始播放第一个视频
    event.target.play()
    let startTime = event.target.getAttribute('data-start')
    let endTime = event.target.getAttribute('data-end')
    if (startTime && isAssign) {
      currentTime.value = parseInt(startTime)
      // if (timerId) {
      //   clearInterval(timerId)
      // }
      // timerId = setInterval(() => {
      //   currentTime.value += 60
      //   // console.log('currentTime', currentTime.value)
      // }, 1000 * 60) as any
    }
  } else {
    videoRefs.value.forEach((item, index) => {
      const vitem = videos.value.find((v) => v.filePath == item.getAttribute('src'))
      if (vitem) {
        // vitem.endTime -
        item.currentTime = currentTime.value - vitem.startTime
        // item.pause()
      } else {
        item.currentTime = 0
      }
    })
  }
}
onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId)
  }
  console.log('onUnmounted')
})

const handleVideoEnded = (event) => {
  console.log('视频播放结束', event.target.getAttribute('data-id'))
  const id = event.target.getAttribute('data-id')
  const index = videos.value.findIndex((item) => item.id == id)
  videos.value[index].currentIndex++
  let nextVideo
  if (videos.value[index].videos) {
    nextVideo = videos.value[index].videos[videos.value[index].currentIndex] as VideoDt
  }

  if (nextVideo) {
    event.target.src = nextVideo.filePath || null
    event.target.setAttribute('data-start', nextVideo.startTime)
    currentTime.value = nextVideo.startTime
    isAssign = true
    findNearTime()
  } else {
    event.target.src = null
  }

  // videoRefs.value[index]?.load()
  // videos.value[index + 1]?.filePath && videoRefs.value[index + 1]?.load()
  console.log('videos', videos.value[index], index)
}
const handleVideoError = (event) => {
  console.log('视频播放失败', event.target.getAttribute('data-id'))
  const id = event.target.getAttribute('data-id')
  const index = videos.value.findIndex((item) => item.id == id)
  videos.value[index].filePath = null
  isAssign = true
}
const onDragend = (el: any) => {
  console.log(
    'onDragend----------',
    startIndex.value,
    endIndex.value,
    el.target.getAttribute('data-id'),
    currentNo
  )
  if (currentNo != '' && moveNos.has(currentNo)) {
    ElMessageBox.confirm('当前设备已经存在', '提示', {
      showCancelButton: false,
      showConfirmButton: false,
      type: 'warning'
    })
    return
  }
  // let endGroup = endIndex.value.split('-')[0]
  let endChild = endIndex.value //.split('-')[1]

  if (currentNo && videos.value[endChild].deviceNum) {
    let index = videos.value.findIndex((item) => item.deviceNum === currentNo)
    if (index == -1) {
      ElMessageBox.confirm('是否覆盖当前设备？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        moveNos.delete(videos.value[endChild].deviceNum)
        videos.value[endChild].deviceNum = currentNo
        videos.value[endChild].name = currentName
        byNogetVideo(videos.value[endChild].deviceNum)
      })
    }
  } else {
    videos.value[endChild].deviceNum = currentNo
    videos.value[endChild].name = currentName
    byNogetVideo(videos.value[endChild].deviceNum)
  }
}

const onDrop = (event: any) => {
  console.log('onDrop', event.target)
  document.querySelectorAll('.video-hover').forEach((item) => {
    item.classList.remove('video-hover')
  })
  // if (endIndex.value != '') {
  //   event.target.classList.remove('video-hover')
  //   endIndex.value = ''
  // }
  // if (event.target.className.indexOf('cls-default') > -1) {
  //   endIndex.value = event.target.getAttribute('data-id')
  // } else {
  //   endIndex.value = event.target.parentElement.getAttribute('data-id')
  // }
}

const onDragover = (event: any) => {
  // console.log('onDragover', event.target)
  event.preventDefault()
  // let tempTargetEl = null
  // tempTargetEl = event.target
  // // if (event.target.className.indexOf('cls-default') > -1) {
  // //   tempTargetEl = event.target
  // //   event.dataTransfer.dropEffect = 'copy'
  // // } else {
  // //   tempTargetEl = event.target.parentElement
  // // }

  // if (targetEl.value == tempTargetEl) {
  //   return
  // } else {
  //   document.querySelectorAll('.item').forEach((item) => {
  //     item.classList.remove('video-hover')
  //   })
  //   targetEl.value = tempTargetEl
  // }

  // tempTargetEl.classList.add('video-hover')
}
// const onDragOverNoDrop = (event: any) => {
//   event.preventDefault()
// }
// const onDropNoDrop = (event: any) => {
//   event.preventDefault()
// }
</script>

<template>
  <ContentWrap>
    <canvas ref="canvasRef" width="640" height="360" style="display: none"></canvas>
    <!-- <Search :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" /> -->
    <div class="flex justify-between items-center mb-4">
      <el-form-item class="flex-1" label="分屏模式">
        <el-select v-model="videoMode" placeholder="请选择分屏模式">
          <el-option
            v-for="item in videoModeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item class="flex-1 ml-4 mr-4" label="部门">
        <el-tree-select
          v-model="department"
          placeholder="请选择部门"
          :props="selectprops"
          :data="departmentOptions"
          :clearable="true"
          @change="departmentChange"
        />
      </el-form-item> -->
      <!-- datetime HH:mm:ss-->
      <el-form-item class="flex-1 ml-4 mr-4" label="时间">
        <el-date-picker
          class="flex-1"
          v-model="chooesDay"
          type="datetime"
          placeholder="请选择日期"
          format="YYYY/MM/DD"
          @change="handleDateChange"
        />
      </el-form-item>
      <el-form-item class="flex-1 mr-4" label="播放速度">
        <el-select v-model="videoSpeed" placeholder="请选择播放速度">
          <el-option
            v-for="item in videoSpeedOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="flex-1 mr-4">
        <BaseButton type="primary" @click="startPlay"
          >全部{{ isPlaying ? '暂停' : '播放' }}</BaseButton
        >
        <BaseButton type="success" @click="syncData">同步</BaseButton>
      </el-form-item>
    </div>
    <div class="flex justify-between mb-4">
      <div>
        <div class="mr-4">
          <el-form-item class="leftbox">
            <el-tree-select
              v-model="department"
              placeholder="请选择部门"
              :props="selectprops"
              :data="departmentOptions"
              :clearable="true"
              @change="departmentChange"
            />
          </el-form-item>
        </div>
        <div class="title">设备</div>
        <div style="height: 60vh; overflow-y: scroll">
          <div
            v-for="(item, index) in devicesList"
            :key="index"
            class="device"
            draggable="true"
            :data-id="'sourcedevicesList-' + item.deviceNo"
            @dragstart="DeviceDragstart($event, item.deviceNo, item.userName)"
            @dragend="onDragend"
            @dragover="onDragover($event)"
            @drop="onDrop($event)"
          >
            {{ item.deviceNo }} - {{ item.userName }}
          </div>
        </div>
      </div>
      <div class="video-box" v-loading="loading">
        <div
          v-for="(item, cindex) in videos.slice(0, videoMode)"
          :key="item.id"
          class="item"
          :class="['cls' + videoMode + '-' + cindex]"
          :data-id="'normaldevicesList-' + cindex"
          @dragover.prevent="onDragover"
          @drop.prevent="onDrop"
          @dragenter="onDragEnter($event, cindex)"
          @dragleave="onDragLeave"
        >
          <div v-if="item.deviceNum" class="deviceNum">{{ item.deviceNum }}- {{ item.name }}</div>
          <!--   @dragstart="onDragstart($event, cindex)"
          @dragend="onDragend"  draggable="true"
          @dragover="onDragover($event)"
          @drop="onDrop($event, cindex)"
          draggable="true" -->
          <el-icon
            v-if="item.filePath"
            color="#fff"
            size="30"
            style="position: absolute; right: 10px; top: 10px; z-index: 9"
            @click="captureVideo(item)"
            ><CameraFilled
          /></el-icon>
          <video
            crossorigin="anonymous"
            v-if="item.filePath"
            :id="item.id + ''"
            :ref="setVideoRef"
            class="videocontent"
            :src="item.filePath"
            controls
            autoplay
            :data-id="item.id"
            :data-start="item.startTime"
            @loadeddata="handleLoadedData"
            @ended="handleVideoEnded"
            @error="handleVideoError"
          ></video>
          <div v-else class="emtybox">暂无视频</div>
          <!-- <videotest :path="item.url" :ref="setVideoRef" class="videocontent" /> -->
          <!-- <VideoPlayer class="videocontent" :url="item.url" :ref="setVideoRef" /> -->
        </div>
      </div>
    </div>
    <!--   @dragover.prevent="onDragOverNoDrop"
            @drop.prevent="onDropNoDrop" -->
    <!-- :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"   -->
    <div class="timebox">
      <!-- <div class="btn" @click="startPlay">全部{{ isPlaying ? '暂停' : '播放' }}</div> -->
      <timeAxis
        :chooes-time="currentTime"
        :chooes-day="chooesDay"
        :videos="videos.slice(0, videoMode)"
        ref="timeAxisRef"
        @current-time-change="getCurrentTime"
      />
    </div>
  </ContentWrap>
</template>
<style scoped>
.video-box {
  background: #000;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  height: 64vh;
  /* width: 97%; */
  padding: 10px;
  flex: 1;
  color: #fff;
}
.leftbox {
  width: 200px;
}
.title {
  margin: 10px 0;
  font-size: 16px;
  color: #333;
}
.device {
  padding: 6px 0;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
}
.item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #999;
  border-radius: 5px;
  position: relative;
}

.video-box .cls1-0 {
  grid-column: 1 / 13;
  grid-row: 1 / 7;
}

.video-box .cls2-0 {
  grid-column: 1 / 7;
  grid-row: 1 / 7;
}

.video-box .cls2-1 {
  grid-column: 7 / 13;
  grid-row: 1 / 7;
}

.video-box .cls3-0 {
  grid-column: 1 / 9;
  grid-row: 1 / 7;
}

.video-box .cls3-1 {
  grid-column: 9 / 13;
  grid-row: 1 / 4;
}

.video-box .cls3-2 {
  grid-column: 9 / 13;
  grid-row: 4 / 7;
}

.video-box .cls4-0 {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
}

.video-box .cls4-1 {
  grid-column: 7 / 13;
  grid-row: 1 / 4;
}

.video-box .cls4-2 {
  grid-column: 1 / 7;
  grid-row: 4 / 7;
}

.video-box .cls4-3 {
  grid-column: 7 / 13;
  grid-row: 4 / 7;
}

.video-box .cls5-0 {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
}

.video-box .cls5-1 {
  grid-column: 4 / 10;
  grid-row: 1 / 7;
}

.video-box .cls5-2 {
  grid-column: 10 / 13;
  grid-row: 1 / 4;
}

.video-box .cls5-3 {
  grid-column: 1 / 4;
  grid-row: 4 / 7;
}

.video-box .cls5-4 {
  grid-column: 10 / 13;
  grid-row: 4 / 7;
}

.video-box .cls6-0 {
  grid-column: 1 / 9;
  grid-row: 1 / 5;
}

.video-box .cls6-1 {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

.video-box .cls6-2 {
  grid-column: 9 / 13;
  grid-row: 3 / 5;
}

.video-box .cls6-3 {
  grid-column: 1 / 5;
  grid-row: 5 / 7;
}

.video-box .cls6-4 {
  grid-column: 5 / 9;
  grid-row: 5 / 7;
}

.video-box .cls6-5 {
  grid-column: 9 / 13;
  grid-row: 5 / 7;
}

.timebox {
  background: black;
  padding: 10px 20px;
  border-radius: 10px;
  margin-top: 10px;
}
.videocontent {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
:deep(.el-form-item) {
  margin-bottom: 0 !important;
}
.btn {
  position: absolute;
  color: #fff;
  right: 4vw;
  top: initial;
  font-size: 14px;
}

.video-hover {
  border: 4px solid red;
  cursor: move;
}
.deviceNum {
  position: absolute;
  color: #fff;
  left: 10px;
  top: 10px;
  font-size: 14px;
  z-index: 9999;
}
:deep(.emptybox) {
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #999;
  border-radius: 5px;
  /* z-index: 999;
  position: absolute; */
}
</style>
